<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>商品添加</span>
    </div>
    <div class="body-box">
      <div class="aic">
        <span>商品名称</span>
        <el-input v-model="name"></el-input>
      </div>
      <div class="aic">
        <span>商品分类</span>
        <el-select v-model="type" style="margin: 0">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.cateName"
            :value="item.cateName"
          >
          </el-option>
        </el-select>
      </div>
      <div class="aic">
        <span>商品价格</span>
        <el-input-number v-model="price" :min="0.01"></el-input-number>
      </div>
      <div class="avatar">
        <span>商品图片</span>
        <el-upload
          class="avatar-uploader"
          action="http://127.0.0.1:5000/goods/goods_img_upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div>
        <span>商品描述</span>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea"
          style="width: 400px"
        >
        </el-input>
      </div>
      <el-button type="primary" :disabled="dis" @click="goodsadd"
        >添加商品</el-button
      >
    </div>
  </el-card>
</template>

<script>
import { categories, itemadd } from "@/apis/item";
export default {
  data() {
    return {
      name: "",
      type: "",
      price: 0,
      options: [],
      dialogVisible: false,
      disabled: false,
      textarea: "",
      imageUrl: "",
      dis: false,
    };
  },
  methods: {
    //图片上传
    handleAvatarSuccess(res, file) {
      console.log(res, file);
      this.newimg = res.imgUrl;
      this.imageUrl = URL.createObjectURL(file.raw);
    },

    //发请求
    goodsadd() {
      if (
        this.name == "" ||
        this.type == "" ||
        this.price == "" ||
        this.newimg == "" ||
        this.textarea == ""
      ) {
        this.$message({
          type: "warning",
          message: "请完整填写信息!",
          center: true,
        });
      } else {
        this.dis = true;
        setTimeout(() => {
          this.dis = false;
        }, 1000);
        itemadd({
          name: this.name,
          category: this.type,
          price: this.price,
          imgUrl: this.newimg,
          goodsDesc: this.textarea,
        }).then((res) => {
          if (res.data.code == 0) {
            this.$message({
              message: "恭喜你，商品添加成功",
              type: "success",
              center: true,
            });
            this.name = "";
            this.type = "";
            this.price = "";
            this.newimg = "";
            this.textarea = "";
          }
        });
      }
    },
  },

  created() {
    categories().then((res) => {
      for (const obj of res.data.categories) {
        this.options.push(obj);
      }
    });
  },
};
</script>

<style lang="less" scoped>
.body-box {
  div {
    display: flex;
    margin-bottom: 20px;
    span {
      width: 80px;
      text-align: right;
      margin-right: 20px;
    }
    .el-input {
      width: 400px;
      margin: 0;
    }
  }
  .avatar {
    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader-icon:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      border: 1px dashed #d9d9d9;
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
      border-radius: 6px;
      cursor: pointer;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  }
  .el-button {
    margin-left: 100px;
  }
}
</style>